<template>
  <div class="addDuty">
      <!-- 面包屑 -->
      	<el-breadcrumb separator=">" class="crumbs">
      	  	<el-breadcrumb-item :to="{ path: '/duty'}">职位管理</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/addDuty'}">添加职位</el-breadcrumb-item>
      	</el-breadcrumb>
      <!-- 添加职位的条件 -->
    <el-row  :gutter="20">
      <!-- <el-col :span="8" class="roleText roleStyle">职位编号</el-col><el-col class="roleStyle" :span="16"><el-input placeholder="请输入内容" v-model="roleId"></el-input></el-col> -->
      <el-col :span="8" class="roleText roleStyle">上级职位名称</el-col><el-col class="roleStyle" :span="16"><el-input disabled placeholder="请输入内容" v-model="$route.query.positionName" @blur="isrepetition" @change="nbspClean" ></el-input></el-col>
      <el-col :span="8" class="roleText roleStyle">职位名称</el-col><el-col class="roleStyle" :span="16"><el-input placeholder="请输入内容" v-model="positionName" @blur="isrepetition" @change="nbspClean" @keyup.native="delSpace('positionName')"></el-input></el-col>
      <el-col :span="8" class="roleText roleStyle">职位描述</el-col><el-col class="roleStyle" :span="16"><el-input placeholder="请输入内容" v-model="positionDescription" @blur="miaoshu" @keyup.native="delSpace('positionDescription')"></el-input></el-col>
			<!-- <el-col :span="8" class="roleText roleStyle">是否有效</el-col><el-col class="roleStyle" :span="16"><el-select v-model="state" placeholder="请选择" class="stateBox">
						<el-option
							v-for="item in states"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
						</el-select></el-col> -->
    </el-row>
    <!-- 添加列表完成  以下是按钮 -->
    <el-row class="addUserBtn">
      <el-col :sm="9" :xs="6">&emsp;</el-col>
      <el-col :sm="3" :xs="6"><el-button type="primary" @click="save">保存</el-button></el-col>
      <el-col :sm="3" :xs="6"><el-button @click='cancel'>取消</el-button></el-col>
      <el-col :sm="9" :xs="6">&emsp;</el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "addDuty",
  data() {
    return {
      positionName: "",
      positionDescription: "",
      states: [{ value: "1", label: "有效" }, { value: "0", label: "无效" }],
      state: "",
      exist: false
    };
  },
  methods: {
    miaoshu() {
      if (this.positionDescription.length > 40) {
        this.$message({
          message: "职位描述最多40个字符！",
          type: "warning",
          showClose: true,
          duration: 1500
        });
      }
    },
    delSpace (str) {
				this[str]  = this[str].replace(/\s/g,"");
			},
    save() {
      // 参数
      var condition = {
        positionName: this.positionName,
        positionDescription: this.positionDescription,
        pid:this.$route.query.pid
	  };
	  if (this.positionName.length > 20) {
        this.$message({
          type: "warning",
          message: "职位名称最多20位字符",
          duration: 1500,
          showClose: true
        });
        return;
      }
      if (!condition.positionName) {
        this.$message({
          message: "请输入职位名称",
          type: "warning",
          showClose: true,
          duration: 1500
        });
        return;
      }
      if (condition.positionDescription.length > 40) {
        this.$message({
          message: "职位描述最多40个字符！",
          type: "warning",
          showClose: true,
          duration: 1500
		});
		
        return;
      }
      if (this.exist) {
        this.$message({
          type: "warning",
          message: "该职位已存在",
          duration: 1500,
          showClose: true
        });
        this.exist = false;
        return;
      }
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(225, 225, 225, 0.5)"
      });
      if(!this.positionName){
        return;
      }
      this.$http
        .post(this._path + "/positionManage/insertPosition", condition)
        .then(res => {
          loading.close();
          if ("success" == res.data.resultMsg) {
            this.$message({
              showClose: true,
              message: "添加成功",
              duration: 1500,
              type: "success"
            });
            
            this.$router.push("/duty");
          } else {
            this.$message({
              showClose: true,
              message: "添加失败",
              duration: 1500,
              type: "error"
            });
          }
        });
    },
    cancel() {
      this.$router.push("/duty");
    },
    isrepetition() {
      if (!this.positionName) {
        return;
      }
      if (this.positionName.length > 10) {
        this.$message({
          type: "warning",
          message: "职位名称最多10位字符",
          duration: 1500,
          showClose: true
        });
        return;
      }
      if (this.positionDescription.length > 40) {
        this.$message({
          message: "职位描述最多40个字符！",
          type: "warning",
          showClose: true,
          duration: 1500
        });
        return;
      }
      $.get(
        this._path + "/positionManage/exist",
        { name: this.positionName },
        res => {
          if(res.code == 'SUCCESS'){
           // 判断code
            if (res.data.exist) {
              this.$message({
                type: "warning",
                message: "该职位已存在",
                duration: 1500,
                showClose: true
              });
              this.exist = true;
              this.positionName = "";
            } else {
              this.exist = false;
            }
          }else{
            this.requestError(res,this)
          }
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
@import "./../style/addDuty.scss";
</style>
